<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Mock.js</title>
  <style type="text/css">
    body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  background-color: #f7f7f7;
  font-size: 100%;
}

#wrapper {
  width: 850px;
  height: 600px;
  overflow: hidden;
  margin: 80px auto 0 auto;
}

.slide {
  width: auto;
  height: 540px;
  padding: 30px;
  font-weight: 200;
  font-size: 200%;
  line-height: 1.375;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.controls .arrow {
  width: 0; height: 0;
  border: 30px solid #333;
  float: left;
  margin-right: 30px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.controls .prev {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  border-left-width: 0;
  border-right-width: 50px;
}

.controls .next {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;

  border-left-width: 50px;
  border-right-width: 0;
}

.controls .prev:hover {
  border-right-color: #888;
  cursor: pointer;
}

.controls .next:hover {
  border-left-color: #888;
  cursor: pointer;
}

.slide h1 {
  font-size: 300%;
  line-height: 1.2;
  text-align: center;
  margin: 170px 0 0;
}

.slide h2 {
  font-size: 100%;
  line-height: 1.2;
  margin: 5px 0;
  text-align: center;
  font-weight: 200;
}

.slide h3 {
  font-size: 140%;
  line-height: 1.2;
  border-bottom: 1px solid #aaa;
  margin: 0;
  padding-bottom: 15px;
}

.slide ul {
  padding: 20px 0 0 60px;
  font-weight: 200;
  line-height: 1.375;
}

.slide .author h1.name {
  font-size: 170%;
  font-weight: 200;
  text-align: center;
  margin-bottom: 30px;
}

.slide .author h3 {
  font-weight: 100;
  text-align: center;
  font-size: 95%;
  border: none;
}

a {
  text-decoration: none;
  color: #44a4dd;
}

a:hover {
  color: #66b5ff;
}

pre {
  font-size: 60%;
  line-height: 1.3;
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.progress-bar {
  width: 0%;
  height: 3px;
  background-color: #b4b4b4;

  -webkit-transition: width 0.1s ease-out;
  -moz-transition: width 0.1s ease-out;
  -o-transition: width 0.1s ease-out;
  transition: width 0.1s ease-out;
}

@media (max-width: 850px) {
  #wrapper {
    width: auto;
  }

  body {
    font-size: 70%;
  }

  img {
    width: 100%;
  }

  .slide h1 {
    margin-top: 120px;
  }

  .controls .prev, .controls .prev:hover {
    border-right-color: rgba(135, 135, 135, 0.5);
  }

  .controls .next, .controls .next:hover {
    border-left-color: rgba(135, 135, 135, 0.5);
  }
}

@media (max-width: 480px) {
  body {
    font-size: 50%;
    overflow: hidden;
  }

  #wrapper {
    margin-top: 10px;
    height: 340px;
  }

  .slide {
    padding: 10px;
    height: 340px;
  }

  .slide h1 {
    margin-top: 50px;
  }

  .slide ul {
    padding-left: 25px;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  @page {
    size: letter;
  }

  html {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  body {
    margin: 0 auto !important;
    border: 0;
    padding: 0;
    float: none !important;
    overflow: visible;
    background: none !important;
    font-size: 52%;
  }

  .progress, .controls {
    display: none;
  }

  #wrapper {
    overflow: visible;
    height: 100%;
    margin-top: 0;
  }

  .slide {
    border: 1px solid #222;
    margin-bottom: 40px;
    height: 3.5in;
  }

  .slide:nth-child(odd) {
    /* 2 slides per page */
    page-break-before: always;
  }
}

/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/

code, pre {
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: auto;
  padding: 6px 10px;
}

code {
  padding: 0 5px;
}

pre>code {
  margin: 0; padding: 0;
  border: none;
  background: transparent;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
  color: #333;
  font-weight: bold
}

pre .number,
pre .hexcolor,
pre .ruby .constant {
  color: #099;
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}

pre .title,
pre .id {
  color: #900;
  font-weight: bold
}

pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .lisp .body {
  color: #008080
}

pre .regexp {
  color: #009926
}

pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
  color: #990073
}

pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
  color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}

pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}

pre .chunk {
  color: #aaa
}


  </style>
</head>
<body>
    <div class="progress">
    <div class="progress-bar"></div>
  </div>

<div id="wrapper">
    <section class="slide"><!-- 
    随堂问题：

    我在分享的过程中会做一些提问和调查，需要各位的配合，我会根据你们的回答调整分享的内容。

    * 使用过 Mock.js 的请举一下手
    * 使用过 RAP（阿里妈妈）、IF（天猫）、中途岛（淘宝）、River（集团）之一的请举一下手
    * 了解过 http://json-schema.org/ 的请举一下手
    * 访问过 http://www.json-generator.com/ 的请举一下手

 -->

<style type="text/css">
    @font-face {
        font-family: 'logo';
        src: url('../demo/assets/font_1390195988_9420388.eot'); /* IE9*/
        src: url('../demo/assets/font_1390195988_9420388.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../demo/assets/font_1390195989_0386753.woff') format('woff'), /* chrome、firefox */
        url('../demo/assets/font_1390195988_7969282.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../demo/assets/font_1390195989_0668917.svg#svgFontName') format('svg'); /* iOS 4.1- */
    }
    .iconlogo {
        font-family: "logo";
        font-size: 120%;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        display: inline-block;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .mock_color {
        color:#428BCA;
    }
    .about_logo .citun {
        width: 49%;
    }
    .dependencies img { 
        max-height: 100px; 
        padding: 18px;
    }
    .dependencies .text {
        display: inline-block;
        height: 100px;
        padding: 18px;
        text-align: center;
        min-width: 100px;
    }
    .mr10 {
        margin-right: 10px;
    }
    .mb10 {
        margin-bottom: 10px;
    }
    .mt20 {
        margin-top: 20px;
    }
    .ml20 {
        margin-left: 20px;
    }
</style>

<h1 class="mock_color">
    <i class="iconlogo">&#x3435;</i>
    <span>Mock.js</span>
</h1>

<h2 id="-">生成模拟数据</h2>
<div style="text-align: center; font-size: 18px; margin-top: 36px;">
    <div style="margin-bottom: 4px;">墨智 / 高云</div>
    <div style="margin-bottom: 4px;"><a href="mailto:mozhi.gyy@alibaba-inc.com">mozhi.gyy@alibaba-inc.com</a></div>
    <div style="margin-bottom: 4px;"><a href="https://github.com/nuysoft/Mock">https://github.com/nuysoft/Mock</a></div>
    <div style="margin-bottom: 4px;"><a href="http://mockjs.com">http://mockjs.com</a></div>
    <div>
        <iframe data-src="http://ghbtns.com/github-btn.html?user=nuysoft&repo=Mock&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="131" height="30"></iframe>
        <iframe data-src="http://ghbtns.com/github-btn.html?user=nuysoft&repo=Mock&type=fork&count=true&size=large"allowtransparency="true" frameborder="0" scrolling="0" width="140" height="30"></iframe>
    </div>
</div></section>
    <section class="slide"><h3 id="-i-class-iconlogo-mock_color-x3435-i-"><i class="iconlogo mock_color">&#x3435;</i></h3>
<p class="about_logo">
    <img class="citun" src="../demo/assets/citun_1.jpg" alt="">
    <img class="citun" src="../demo/assets/citun_2.jpg" alt="">
</p>

<p><em>蓝色 Logo 出自设计师 @山峰，图片来自 <a href="http://baike.baidu.com/view/260039.htm">刺豚_百度百科</a>。</em></p>
<!--  --></section>
    <section class="slide"><style>
    .question {
        font-size: 250%;
        font-weight: bold;
    }
</style>

<h3 id="-">开始之前</h3>
<p><a href="http://mockjs.com/">mockjs.com</a></p>
<p><a href="/doc/lanlan.html"><img src="../demo/assets/doc.png" alt=""></a></p>
<!-- 数据模板编辑器 --></section>
    <section class="slide"><h3 id="-">开始之前 - ？</h3>
<p class="question">Mock.js</p></section>
    <section class="slide"><h3 id="-">开始之前 - ？</h3>
<p class="question">RAP、IF、River、中途岛</p></section>
    <section class="slide"><h3 id="-">开始之前 - ？</h3>
<p class="question"><a href="http://json-schema.org/">json-schema.org</a></p></section>
    <section class="slide"><h3 id="-">开始之前 - ？</h3>
<p class="question"><a href="http://www.json-generator.com/">json-generator.com</a></p></section>
    <section class="slide"><h3 id="-">内容</h3>
<ul>
<li>Mock.js 是什么  <!-- 
  * 模拟数据生成器
  * 定位：HTML CSS JavaScript Data
  * 问题：定位、缘起、静态数据、动态数据、拦截请求
  * 升华：
  * 
   --></li>
<li>快速开始</li>
<li>数据模板</li>
<li>数据占位符</li>
<li>未来规划</li>
<li>问答</li>
</ul>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-default name">HTML</span></p>
<pre><code>&lt;a class=&quot;url&quot; href=&quot;url&quot;&gt;{{url}}&lt;/a&gt;</code></pre>
<p><span class="label label-default name">CSS</span></p>
<pre><code>.url { color: #428BCA; }</code></pre>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-default name">JS</span></p>
<pre><code>$(&#39;.url&#39;).on(&#39;mouseenter&#39;, function(event){ })</code></pre>
<p><span class="label label-default name">DATA</span></p>
<pre><code>{ url: &#39;http://mockjs.com&#39; }</code></pre>
<p><span class="label label-danger">Warning</span> 数据是必不可少的一环，但解决方案很少</p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-default name">AJAX</span></p>
<pre><code>$.ajax({
    url: &#39;...&#39;,
    sucess: function(data, status, xhr){
        // ...
    }
})</code></pre>
<p><span class="label label-danger">Warning</span> 如果接口不稳定，怎么办？</p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<pre><code>var data = {
    list: [
        { &quot;id&quot;: 1, &quot;name&quot;: &quot;Jennifer Allen&quot; },
        { &quot;id&quot;: 2, &quot;name&quot;: &quot;Donna Lopez&quot; },
        { &quot;id&quot;: 3, &quot;name&quot;: &quot;Edward Davis&quot; }
    ]
}
function sucess(data, status, xhr) { ... }

// $.ajax({ ... })
sucess(data)</code></pre>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-danger mr10 mb10">Warning</span> 制造静态数据很无趣，例如可能很长</p>
<p><span class="label label-danger mr10 mb10">Warning</span> 静态数据的类型很多，例如图片</p>
<p><span class="label label-danger mr10 mb10">Warning</span> 需要修改既有代码</p>
<p><span class="label label-danger mr10 mb10">Warning</span> 测试用例单一</p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-success mr10 mb10">期望1</span> 生成随机数据</p>
<p><span class="label label-success mr10 mb10">期望2</span> 拦截 Ajax 请求</p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-success mr10 mb10">期望3</span> 开发无侵入</p>
<p><span class="label label-success mr10 mb10">期望4</span> 引入方便，用法简单</p>
<p><span class="label label-success mr10 mb10">期望5</span> 数据类型丰富</p>
<p><span class="label label-success mr10 mb10">期望6</span> 符合直觉的接口</p>
<p><span class="label label-success mr10 mb10">期望7</span> 一目了然的文档</p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<h1 id="-span-class-label-label-success-mr10-mb10-span-span-class-label-label-success-mr10-mb10-span-"><span class="label label-success mr10 mb10">可用</span> <span class="label label-success mr10 mb10">好用</span></h1>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p>一款模拟数据生成器。</p>
<p><span class="label label-success mr10 mb10">功能 1</span> 基于 数据模板 生成 模拟数据</p>
<p><span class="label label-success mr10 mb10">功能 2</span> 类型丰富的 随机数据</p>
<p><span class="label label-success mr10 mb10">功能 3</span> 模拟 Ajax 请求</p>
<p><span class="label label-success mr10 mb10">功能 4</span> <del>基于 HTML 模板生成模拟数据</del></p>
</section>
    <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
<p><span class="label label-primary mr10 mb10">价值 1</span> 前端攻城师独立于后端进行开发</p>
<p><span class="label label-primary mr10 mb10">价值 2</span> 提高单元测试覆盖率</p>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success mr10 mb10">第 1 步</span> 安装 Mock.js</p>
<pre><code>npm install bower -g
bower install mockjs --save</code></pre>
<p><span class="label label-success mr10 mb10">第 2 步</span> 引入 Mock.js</p>
<pre><code>&lt;script src=&quot;./bower_components/mockjs/dist/mock.js&quot;&gt;&lt;/script&gt;</code></pre>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success mr10 mb10">第 3 步</span> 调用 <code>Mock.mock( template )</code> 生成模拟数据</p>
<pre><code>var data = Mock.mock({
    &#39;list|1-10&#39;: [{
        &#39;id|+1&#39;: 1
    }]
})
console.log(
    JSON.stringify(data, null, 4)
)</code></pre>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success mr10 mb10">生成的模拟数据</span></p>
<pre><code>{
    &quot;list&quot;: [
        { &quot;id&quot;: 1 },
        { &quot;id&quot;: 2 },
        { &quot;id&quot;: 3 },
        { &quot;id&quot;: 4 }
    ]
}</code></pre>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success">第 3 步</span> 调用 <code>Mock.mock( url, template )</code> 拦截 Ajax</p>
<pre><code>Mock.mock(&#39;hello.json&#39;, {
    &#39;list|1-10&#39;: [{
        &#39;id|+1&#39;: 1
    }]
})</code></pre>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success mr10 mb10">发起 Ajax 请求</span></p>
<pre><code>$.ajax({
    url: &#39;hello.json&#39;,
    dataType: &#39;json&#39;
}).done(function(data, status, xhr){
    console.log(
        JSON.stringify(data, null, 4)
    )    
})</code></pre>
</section>
    <section class="slide"><h3 id="-">快速开始</h3>
<p><span class="label label-success mr10 mb10">响应的模拟数据</span></p>
<pre><code>{
    &quot;list&quot;: [
        { &quot;id&quot;: 1 },
        { &quot;id&quot;: 2 },
        { &quot;id&quot;: 3 },
        { &quot;id&quot;: 4 },
        { &quot;id&quot;: 5 }
    ]
}</code></pre>
</section>
    <section class="slide"><h3 id="-">数据模板</h3>
<p>每个属性由 <span class="label label-success">3</span> 部分构成：</p>
<pre><code>// 属性名   name
// 生成规则 rule
// 属性值   value
&#39;name|rule&#39;: value</code></pre>
</section>
    <section class="slide"><h3 id="-">数据模板</h3>
<style>
    .dtd .label-primary {
        display: inline-block;
        width: 131px;
        line-height: 1.2;
    }
</style>

<p class="dtd">
    <span class="label label-primary mr10 mb10">String</span>
    <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: &#39;value&#39;</span>
</p>
<p class="dtd">
    <span class="label label-primary mr10 mb10">Number</span>
    <span class="label label-success mr10 mb10">&#39;name|min-max.dmin-dmax&#39;: value</span>
</p>
<p class="dtd">
    <span class="label label-primary mr10 mb10">Boolean</span>
    <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: value</span>
</p></section>
    <section class="slide"><h3 id="-">数据模板</h3>
<p class="dtd">
    <span class="label label-primary mr10 mb10">Object</span>
    <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: {}</span>
</p>
<p class="dtd">
    <span class="label label-primary mr10 mb10">Array</span>
    <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: [{}, {} ...]</span>
</p>
<p class="dtd">
    <span class="label label-primary mr10 mb10">Function</span>
    <span class="label label-success mr10 mb10">&#39;name&#39;: function(){}</span>
</p></section>
    <section class="slide"><h3 id="-">数据占位符</h3>
<p>格式：</p>
<pre><code>@占位符
@占位符(参数 [, 参数])</code></pre>
<p>与 <span class="label label-success mb10">Mock.Random</span> 中的方法一一对应</p>
</section>
    <section class="slide"><h3 id="-">数据占位符</h3>
<style>
    .dpd .label-primary {
        display: inline-block;
        width: 26%;
        line-height: 1.2;
    }
</style>

<p><span class="label label-success mb10">Mock.Random</span></p>
<p class="dpd">
    <span class="label label-primary mr10 mb10">Basics</span>
    <span class="label label-primary mr10 mb10">Image</span>
    <span class="label label-primary mr10 mb10">Color</span>
    <span class="label label-primary mr10 mb10">Text</span>
    <span class="label label-primary mr10 mb10">Name</span>
    <span class="label label-primary mr10 mb10">Web</span>
    <span class="label label-primary mr10 mb10">Address</span>
    <span class="label label-primary mr10 mb10">Miscellaneous</span>
    <span class="label label-primary mr10 mb10">Helpers</span>
</p></section>
    <section class="slide"><h3 id="-">数据占位符</h3>
<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
<pre><code>Mock.Random.extend({
    hero: function() {
        return this.pick([
            &#39;盖伦 德玛西亚&#39;,
            &#39;艾希 寒冰射手&#39;,
            &#39;瑞兹 流浪法师&#39;
        ])
    }
})</code></pre>
</section>
    <section class="slide"><h3 id="-">数据占位符</h3>
<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
<pre><code>Mock.Random.hero()
// =&gt; &quot;艾希 寒冰射手&quot;

Random.hero()
// =&gt; &quot;瑞兹 流浪法师&quot;</code></pre>
</section>
    <section class="slide"><h3 id="-">数据占位符</h3>
<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
<pre><code>Mock.mock(&#39;@hero&#39;)
// =&gt; &quot;瑞兹 流浪法师&quot;

Mock.mock({
  free: &#39;@hero&#39;
})
// =&gt; { free: &quot;盖伦 德玛西亚&quot;}</code></pre>
</section>
    <section class="slide"><h3 id="-">阿里妈妈的实践</h3>
<p><span class="label label-success mr10 mb10">集中管理数据模板</span></p>
<pre><code>KISSY.add(&quot;app/models/data&quot;, function(S, Mock) {

    Mock.mock(&#39;foo.json&#39;, { ... })
    Mock.mock(&#39;bar.json&#39;, { ... })
    Mock.mock(&#39;faz.json&#39;, { ... })

}, {
    requires: [&#39;components/mock/index&#39;]
})</code></pre>
</section>
    <section class="slide"><h3 id="-">阿里妈妈的实践</h3>
<p><span class="label label-success mr10 mb10">根据 URL 中是否含有参数 mock 动态加载数据模板</span></p>
<pre><code>// http://host:port?mock
var mock = ~location.search.indexOf(&#39;mock&#39;)
if(mock) KISSY.use(&#39;app/models/data&#39;)</code></pre>
</section>
    <section class="slide"><h3 id="-">未来规划</h3>
<ol>
<li><p>基于 模板 校验 数据</p>
<p> <span class="label label-success mr10 mb10">Mock.valid(template, data)</span></p>
</li>
<li><p>基于 正则 生成 数据</p>
<p> <span class="label label-success mr10 mb10">Mock.mock( regexp )</span></p>
</li>
</ol>
</section>
    <section class="slide"><h3 id="-">回顾一下</h3>
<ul>
<li>Mock.js 是什么</li>
<li>数据模板</li>
<li>数据占位符</li>
</ul>
<blockquote>
<p>只做一件事，并做好。——《Unix 编程艺术》</p>
</blockquote>
</section>
    <section class="slide"><h3 id="-">问答</h3>
<ol>
<li><p>你如何看待 JSON Schema？</p>
<p> 看上去很美。</p>
</li>
<li><p>Mock.js 如何协同 RAP（阿里妈妈）、IF（天猫）、中途岛（淘宝）、River（集团）？</p>
<p> 目前 RAP、中途岛、River 基于 Mock.js 生成随机数据。</p>
</li>
</ol>
</section>
    <section class="slide"><h3 id="-">问答</h3>
<p class="mock_color" style="position: relative; text-align: center;">
    <i class="iconlogo" style="font-size: 1000%;">&#x3435;</i>
    <span style="position: absolute; left: 40%; top: 5%; font-size: 200%;">？</span>
</p></section>
    <section class="slide"><h1 class="mock_color">求 Star</h1></section>
    <section class="slide"><h3 id="-">没有了</h3>
<p style="text-align: center; font-size: 64px;">谢谢各位的聆听</p>

<p>无论您对模拟数据有什么见解，或者对 Mock.js 有什么建议，或者遇到什么不爽的地方，欢迎来 <a href="https://github.com/nuysoft/Mock/issues/">砸砖</a> 和 <a href="mailto:nuysoft@gmail.com">交流</a>。</p>
<style>
table {
  max-width: 100%;
  background-color: transparent;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dddddd;
}

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}

.table > tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table .table {
  background-color: #ffffff;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  /*font-size: 75%;*/
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.label[href]:hover,
.label[href]:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.label:empty {
  display: none;
}

.btn .label {
  position: relative;
  top: -1px;
}

.label-default {
  background-color: #999999;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}

.label-primary {
  background-color: #428bca;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}

.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}
</style>

<p><style type="text/css">
    pre {
        padding: 0px;
    }
    .hljs {
        font-size: 200%;
    }
</style></p>
<p><link rel="stylesheet" href="../bower_components/highlightjs/styles/rainbow.css"></p>
<script src="../bower_components/highlightjs/highlight.pack.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../dist/mock.js"></script>
<script>hljs.initHighlightingOnLoad();</script></section>
    <section class="slide"><div class="author">
  <h1 class="name">墨智 &#x2F; 高云</h1>
    <h3 class="url">
      <a href="http://nuysoft.com">http://nuysoft.com</a>
    </h3>
    <h3 class="email">
      <a href="mailto:mozhi.gyy@alibaba-inc.com">mozhi.gyy@alibaba-inc.com</a>
    </h3>
</div>
</section>
</div>
  <div class="controls">
    <div class="arrow prev"></div>
    <div class="arrow next"></div>
  </div>


  <script type="text/javascript">
    /**
 * Takes the last slide and places it at the front.
 */
function goBack() {
  var wrapper = document.querySelector('#wrapper');
  var lastSlide = wrapper.lastChild;
  while (lastSlide !== null && lastSlide.nodeType !== 1) {
    lastSlide = lastSlide.previousSibling;
  }

  wrapper.removeChild(lastSlide);
  wrapper.insertBefore(lastSlide, wrapper.firstChild);

  setCurrentProgress();
  updateURL();
  updateTabIndex();
}

/**
 * Takes the first slide and places it at the end.
 */
function goForward() {
  var wrapper = document.querySelector('#wrapper');
  var firstSlide = wrapper.firstChild;
  while (firstSlide !== null && firstSlide.nodeType !== 1) {
    firstSlide = firstSlide.nextSibling;
  }

  wrapper.removeChild(firstSlide);
  wrapper.appendChild(firstSlide);

  setCurrentProgress();
  updateURL();
  updateTabIndex();
}

/**
 * Updates the current URL to include a hashtag of the current page number.
 */
function updateURL() {
  window.history.replaceState({} , null, '#' + currentPage());
}

/**
 * Returns the current page number of the presentation.
 */
function currentPage() {
  return document.querySelector('#wrapper .slide').dataset.page;
}

/**
 * Returns a NodeList of each .slide element.
 */
function allSlides() {
  return document.querySelectorAll('#wrapper .slide');
}

/**
 * Give each slide a "page" data attribute.
 */
function setPageNumbers() {
  var wrapper = document.querySelector('#wrapper');
  var pages   = wrapper.querySelectorAll('section');
  var page;

  for (var i = 0; i < pages.length; ++i) {
    page = pages[i];
    page.dataset.page = i;
  }
}

/**
 * Set the current progress indicator.
 */
function setCurrentProgress() {
  var wrapper = document.querySelector('#wrapper');
  var progressBar = document.querySelector('.progress-bar');

  if (progressBar !== null) {
    var pagesNumber    = wrapper.querySelectorAll('section').length;
    var currentNumber  = parseInt(currentPage(), 10);
    var currentPercent = pagesNumber === 1 ? 100 : 100 * currentNumber / (pagesNumber - 1);
    progressBar.style.width = currentPercent.toString() + '%';
  }
}

/**
 * Go to the specified page of content.
 */
function goToPage(page) {
  // Try to find the target slide.
  var targetSlide = document.querySelector('#wrapper .slide[data-page="' + page + '"]');

  // If it actually exists, go forward until we find it.
  if (targetSlide) {
    var numSlides = allSlides().length;

    for (var i = 0; currentPage() !== page && i < numSlides; i++) {
      goForward();
    }
  }
}

/**
 * Removes tabindex property from all links on the current slide, sets
 * tabindex = -1 for all links on other slides. Prevents slides from appearing
 * out of control.
 */
function updateTabIndex() {
  var allLinks = document.querySelectorAll('.slide a');
  var currentPageLinks = document.querySelector('.slide').querySelectorAll('a');
  var i;

  for (i = 0; i < allLinks.length; i++) {
    allLinks[i].setAttribute('tabindex', -1);
  }

  for (i = 0; i < currentPageLinks.length; i++) {
    allLinks[i].removeAttribute('tabindex');
  }
}

window.onload = function () {

  // Give each slide a "page" data attribute.
  setPageNumbers();

  // Update the tabindex to prevent weird slide transitioning
  updateTabIndex();

  // If the location hash specifies a page number, go to it.
  var page = window.location.hash.slice(1);
  if (page) {
    goToPage(page);
  }

  document.onkeydown = function (e) {
    var kc = e.keyCode;

    // left, down, H, J, backspace, PgUp - BACK
    // up, right, K, L, space, enter, PgDn - FORWARD
    if (kc === 37 || kc === 40 || kc === 8 || kc === 72 || kc === 74 || kc === 33) {
      goBack();
    } else if (kc === 38 || kc === 39 || kc === 13 || kc === 32 || kc === 75 || kc === 76 || kc === 34) {
      goForward();
    }
  };

  if (document.querySelector('.next') && document.querySelector('.prev')) {
    document.querySelector('.next').onclick = function (e) {
      e.preventDefault();
      goForward();
    };

    document.querySelector('.prev').onclick = function (e) {
      e.preventDefault();
      goBack();
    };
  }

};


  </script>
</body>
</html>
